<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>编辑客户</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
	</head>
	<body>
		<form class="layui-form" id="editCustomer" lay-filter="editCustomer">
			<input type="hidden" name="custId" />
			<div class="layui-row layui-panel" style="padding:15px">
				<div class="layui-col-md6">
					<div class="layui-form-item">
					    <label class="layui-form-label">客户名称：</label>
					    <div class="layui-input-block">
					      <input type="text" name="custName" autocomplete="off" placeholder="请输入客户名称" class="layui-input">
					    </div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form-item">
						<label class="layui-form-label">出生日期：</label>
						<div class="layui-input-block">
							<input type="text" id="custStartDate" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form-item">
						<label class="layui-form-label">客户类型：</label>
						<div class="layui-input-inline">
							<select name="custTypeId" id="custTypeId">

							</select>
						</div>
						<button type="button" class="layui-btn layui-btn-sm" style="height: 38px;" id="addCustType">
							<i class="layui-icon">&#xe654;</i>
						</button>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form-item">
						<label class="layui-form-label">性别：</label>
						<div class="layui-input-inline">
							<select name="custSex" id="custSex">
								<option value="男">男</option>
								<option value="女">女</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form-item">
						<label class="layui-form-label">联系电话：</label>
						<div class="layui-input-block">
							<input type="text" name="custPhone" autocomplete="off" placeholder="请输入联系电话" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form-item">
						<label class="layui-form-label">联系地址：</label>
						<div class="layui-input-block">
							<input type="text" name="custAddress" autocomplete="off" placeholder="请输入联系地址" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form-item">
						<label class="layui-form-label">卡号：</label>
						<div class="layui-input-block">
							<input type="text" name="custMenmber" autocomplete="off" placeholder="请输入卡号" class="layui-input">
							<span class="layui-font-red">(请输入后台会员编号，或者输入新的卡号将自动创建一个会员)</span>
						</div>
					</div>
				</div>
				<div class="layui-col-md12">
					<div class="layui-form-item">
						<label class="layui-form-label">备注：</label>
						<div class="layui-input-block">
							<input type="text" name="custComment" autocomplete="off" placeholder="请输入相关备注" class="layui-textarea">
						</div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="checkbox" name="" title="默认客户" lay-skin="primary"> 
						</div>
					</div>
				</div>
				<div class="layui-col-md12" style="text-align: center;">
					<div class="layui-btn-container">
					  <button type="button" class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
					</div>
				</div>
			</div>
		</form>
		
		<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'layer'],function(){
				var $ = layui.jquery,
					form = layui.form,
					layer = layui.layer,
					laydate = layui.laydate;
				
				//时间控件（出生日期）
				laydate.render({
					elem: '#custStartDate',
					value: new Date(),
					isInitValue: true	//用于控制是否自动向元素填充初始值（需配合 value 参数使用），默认为 true
				});
				
				//获取客户信息(String对象 --> JSON格式的对象)
				var data = JSON.parse(parent.custmoterInfo);
				//给表单填充值
				form.val('editCustomer' , data);
				
				//监听提交（保存修改的客户信息）
				form.on('submit(saveBtn)', function (data) {
				    //获取待修改的用户信息
					var customerInfo = $('#editCustomer').serialize();
					//局部刷新，更改数据
                    $.ajax({
                        url: '/updateAlertCustomerInfo?'+customerInfo,
                        dataType: 'json',
                        type: 'post',
                        success: function (d) {
                            if(0<d){
                                parent.layui.table.reload('custmoter',{
                                    data:data.field
								});
                            }
                        }
                    });
			
					//关闭弹窗
					var iframeIndex = parent.layer.getFrameIndex(window.name);
					parent.layer.close(iframeIndex);
				});

                /* ---------- 填充客户类型下拉选项 ---------- */
                function showCustomerTypeInfo(){
                    $.ajax({
                        url: '/showCustomerTypeInfo',
                        dataType: 'json',
                        type: 'get',
                        success: function (data) {
                            //清空下拉列表的值
                            $('#custTypeId').html('');
                            //循环添加元素
                            $.each(data, function (index, item) {
                                // 下拉菜单里添加元素
                                $('#custTypeId').append(new Option(item.custTypeName,item.custTypeId));
                            });
                            //重新渲染 固定写法
                            layui.form.render("select");
                        }
                    });
				}
                showCustomerTypeInfo();

                /* ---------- 新增客户类型按钮操作 ---------- */
                $('#addCustType').on('click',function () {
                    layer.open({
                        type: 1,
                        title: '新增客户类型',
                        area: ['300px', '180px'],
                        content:
                        '<label class="layui-form-label" style="margin-top: 25px;">客户类型：</label>'
                        +'<input type="text" name="custTypeName" autocomplete="off" placeholder="请输入客户类型" class="layui-input" style="width: 160px;margin-top: 25px;">',
                        btn: ['新增'],
                        yes: function () {
                            //获取客户类型名称
                            var custTypeName = $('input[name=custTypeName]').val();
                            if('' != custTypeName){
                                //局部刷新
                                $.ajax({
                                    url: '/updateInsertCustomerType/'+custTypeName,
                                    success: function (obj) {
                                        if(1 == JSON.parse(obj)){
                                            layer.msg('客户类型新增成功！',{time:500},function () {
                                                //关闭弹窗
                                                layer.closeAll();
                                                //重载下拉列表
                                                showCustomerTypeInfo();
                                            });
                                        }else{
                                            layer.msg('客户类型新增失败！',{time:500});
                                        }
                                    }
                                });
                            }else{
                                layer.msg('还未输入客户类型！',{time:500});
                            }
                        }
                    });
                });
			});
		</script>
	</body>
</html>
